<template>
  <div class="app-container">
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="公寓设置" name="apartment">
        <ApartMent v-if="activeName === 'apartment'" />
      </el-tab-pane>
      <el-tab-pane label="岗位管理" name="post">
        <Post v-if="activeName === 'post'" />
      </el-tab-pane>
      <el-tab-pane label="分组" name="group">
        <Group v-if="activeName === 'group'" />
      </el-tab-pane>
      <el-tab-pane label="电子合同设置" name="contract">
        <div v-if="activeName === 'contract'">电子合同设置</div>
      </el-tab-pane>
      <el-tab-pane label="短信模板" name="msgTemplate">
        <Message v-if="activeName === 'msgTemplate'" />
      </el-tab-pane>
      <el-tab-pane label="房间设置" name="room">
        <RoomSt v-if="activeName === 'room'" />
      </el-tab-pane>
      <el-tab-pane label="门锁设置" name="lock">
        <Lock v-if="activeName === 'lock'" />
      </el-tab-pane>
      <el-tab-pane label="水电设置" name="hydropower">
        <Hydropower v-if="activeName === 'hydropower'" />
      </el-tab-pane>
      <el-tab-pane label="线上支付" name="payment">
        <Payment v-if="activeName === 'payment'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Setting">
import Group from './group'
import ApartMent from './apartment'
import Post from './post'
import Message from './message'
import RoomSt from './roomSt'
import Lock from './lock'
import Hydropower from './hydropower'
import Payment from './payment'
const activeName = ref('apartment')
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
